<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
    <style>
        *{margin: 0;
        padding: 0;}

        .demo1{
            background-color: blue;
            height: 30px;
        }

        .box1{
            height:50px;
            background-color: aqua;
        }
        .box2{
            padding: 5px;
            background-color:green;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: #fcc;
           overflow: auto;
        }
        .list li{
            
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- 
        vue事件中的事件修饰符
        1.prevent阻止默认事件
        2.stop阻止事件冒泡
        3.once事件指触发一次
        4.capture:事件的捕获方式
        5.self:只有event.target是当前的操作元素时才是触发事件
        6.passive：事件的默认行为立即执行无需等待事件回调执行完毕
        、
     -->
    <!--准备好一个容器-->
    <div id="app">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 1.prevent阻止默认事件 -->
        <a href="www.baidu.com"  @click.prevent="showinfo">点我</a>
        <!-- 2.stop阻止事件冒泡 -->
        <div class="demo1" @click="showinfo">
            <button @click.stop="showinfo">点击</button>
        </div>
        <!--  3.once事件指触发一次 -->
        <button @click.once="showinfo">点击</button>
        <!-- capture:事件的捕获方式 -->

        <div class="box1" @click.capture="showMsg(1)">
          div1
             <div class="box2" @click="showMsg(2)">
              div2 
             </div>
        </div>

        <!-- self:只有event.target是当前的操作元素时才是触发事件 -->
        <div class="demo1" @click.self="showinfo">
            <button @click="showinfo">点击</button>
        </div>
        
        <!--  6.passive：事件的默认行为立即执行无需等待事件回调执行完毕 -->
        <ul  @scroll="demo(1)" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

       
    </div>
    <!--引入vue-->
    <script src="../../vue.js/vue.js"></script>
    <script>
 Vue.config.productionTip=false//阻止vue在启动时候生成生产提示
        var app = new Vue({
            el: "#app",
            data: {
                name:"gdcp",
              

            },
            methods: {
                showinfo(e){
                    // e.preventDefault();//阻止默认行为
                    // e.stopPropagation();//阻止冒泡
                    // alert("你好")
                    console.log(e.target)


                },
                showMsg(e){
                    console.log(e)
                },
                demo(msg){
                    console.log(msg)
                }


            }
        });
    </script>
</body>

</html>